<!-- 知识库详情 zsl -->
<template>
	<view class="detail-box">
		<view class="top shadow radius">
			<view class="top-img" v-if="info.files&&info.files.length==1">
				<image v-for="(item,index) in info.files" :src="item.url" mode="aspectFit"></image>
			</view>
			<view class="top-item">
				<text class="top-label short-text">联合国编号</text>
				<text class="top-con short-text">UN {{info.unCode}}</text>
			</view>
			<view class="top-item">
				<text class="top-label short-text">项目类别</text>
				<text class="top-con short-text">{{info.termOther}}</text>
			</view>
			<view class="top-item">
				<text class="top-label short-text">正式运输名称</text>
				<text class="top-con short-text">{{info.transportName}}</text>
			</view>
			<view class="top-item">
				<text class="top-label short-text">常见形式</text>
				<text class="top-con short-text">{{info.commonForm}}</text>
			</view>
		</view>
		<view class="middle shadow radius" v-if="info.files&&info.files.length>1">
			<image v-for="(item,index) in info.files" :key="index" :src="item.url" mode="aspectFit"></image>
		</view>
		<view class="bottom shadow radius">
			<tool-collapse v-for="(items,index) in collapseList" :data="items" :key="index"></tool-collapse>
		</view>
	</view>
</template>

<script>
	import toolCollapse from '@/components/tool-collapse/tool-collapse.vue';
	export default {
		components: {
			toolCollapse
		},
		data() {
			return {
				info: {
					"id": "",
					"dgoodsId": "",
					"unCode": "",
					"chnAlias": "",
					"chnNameAndDescribe": "",
					"engNameAndDescribe": "",
					"category": "",
					"termOther": "",
					"classificationCode": "",
					"packingCategory": "",
					"sign": "",
					"specialRegulations": "",
					"limitedNumber": "",
					"exceptionNumber": "",
					"containerPackingGuide": "",
					"containerSpeciPackRegul": "",
					"containerBlendPackRegul": "",
					"movePotCabinetShxGuide": "",
					"movePotCabinetShxSpecialRegul": "",
					"adrCanBodyCode": "",
					"adrCanBodySpecialRegulations": "",
					"tankTypeTransportVeh": "",
					"transportCategory": "",
					"transportSpecialRegulPackPiece": "",
					"transportSpecialRegulBulk": "",
					"transportSpecialRegulLoadAndUnload": "",
					"transportSpecialRegulOperation": "",
					"dangerInformationNumber": "",
					"dangerInfo": "",
					"storageTranspReq": "",
					"protectMeasures": "",
					"leakHandle": "",
					"firstAid": "",
					"fireFighting": "",
					"files": "",
					"guideNumber": "",
					"commonForm": "",
					"relativeDensity": "",
					"transportName": "",
					"newSignNo": "",
					"guideDesc": "",
					"publicSecurity": "",
					"technicalType": ""
				},
				collapseList: [],
				infoList: [{
						label: "安全指导",
						prop: "guideDesc",
					},
					{
						label: "公众安全",
						prop: "publicSecurity",
					},
					{
						label: "危险信息",
						prop: "dangerInfo",
					},
					{
						label: "储运要求",
						prop: "storageTranspReq",
					},
					{
						label: "防护措施",
						prop: "protectMeasures",
					},
					{
						label: "泄露处理",
						prop: "leakHandle",
					},
					{
						label: "急救",
						prop: "firstAid",
					},
					{
						label: "灭火方法",
						prop: "fireFighting",
					},
				]
			}
		},
		methods: {
			getInfoList(data) {
				var list = [];
				var index = 0;
				this.infoList.forEach(item => {
					if (data[item.prop]) {
						list.push({
							index: ++index,
							title: item.label,
							content: data[item.prop]
						})
					}
				})
				return list;
			},
			getDetail(id) {
				this.$api.dangerousKnowDetail(id).then(res => {
					Object.assign(this.info, res.data.data);
					this.$nextTick(() => {
						this.collapseList = this.getInfoList(this.info)
					})
				})
			},
		},
		onLoad(option) {
			this.getDetail(option.id);
		}
	}
</script>

<style scoped lang="scss">
	.detail-box {
		padding: 20rpx;
	}

	.top,
	.middle,
	.bottom {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.top {
		position: relative;

		.top-item {
			display: flex;
			padding: 10rpx 0;

			.top-label {
				width: 7em;
				color: #666;
			}

			.top-con {
				flex: 1;
			}
		}

		.top-img {
			position: absolute;
			top: 50%;
			right: 30rpx;
			margin-top: -90rpx;

			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		&::before {
			content: "";
			border-left: 6rpx #007AFF solid;
			height: 32rpx;
			position: absolute;
			top: 32rpx;
			left: 0;
		}
	}

	.middle {
		text-align: center;

		image {
			width: 180rpx;
			height: 180rpx;
			margin: 0 10rpx 10rpx;
		}
	}

	.bottom {}
</style>
